document.addEventListener('DOMContentLoaded', function () {
    // 初始化表单验证
    initFormValidation();

    // 显示错误消息（如果有）
    showErrorMessage();
});

function initFormValidation() {
    const form = document.getElementById('loginForm');

    form.addEventListener('submit', function (event) {
        let isValid = true;

        // 验证用户名
        const uname = document.getElementById('uname');
        if (!validateUsername(uname.value)) {
            showFieldError('uname', '用户名不能为空且长度在3-20个字符之间');
            isValid = false;
        }

        // 验证密码
        const pwd = document.getElementById('pwd');
        if (!validatePassword(pwd.value)) {
            showFieldError('pwd', '密码不能为空且长度至少为6个字符');
            isValid = false;
        }

        // 验证验证码
        const vcode = document.getElementById('vcode');
        if (!validateCaptcha(vcode.value)) {
            showFieldError('vcode', '请输入验证码');
            isValid = false;
        }

        if (!isValid) {
            event.preventDefault();
        }
    });

    // 添加实时验证
    addLiveValidation('uname', validateUsername);
    addLiveValidation('pwd', validatePassword);
    addLiveValidation('vcode', validateCaptcha);
}

function validateUsername(value) {
    return value.length >= 3 && value.length <= 20;
}

function validatePassword(value) {
    return value.length >= 6;
}

function validateCaptcha(value) {
    return value.length > 0;
}

function showFieldError(fieldId, message) {
    const field = document.getElementById(fieldId);
    const formGroup = field.closest('.form-group');
    formGroup.classList.add('has-error');
    const errorText = formGroup.querySelector('.error-text');
    if (errorText) {
        errorText.textContent = message;
        errorText.style.display = 'block';
    }
}

function clearFieldError(fieldId) {
    const field = document.getElementById(fieldId);
    const formGroup = field.closest('.form-group');
    formGroup.classList.remove('has-error');
    const errorText = formGroup.querySelector('.error-text');
    if (errorText) {
        errorText.style.display = 'none';
    }
}

function addLiveValidation(fieldId, validationFn) {
    const field = document.getElementById(fieldId);
    field.addEventListener('input', function () {
        if (validationFn(this.value)) {
            clearFieldError(fieldId);
        }
    });
    field.addEventListener('blur', function () {
        if (!validationFn(this.value)) {
            showFieldError(fieldId, `请输入有效的${field.placeholder}`);
        }
    });
}

function refreshCaptcha() {
    const captchaImg = document.getElementById('captcha');
    captchaImg.src = `${window.contextPath}/verifyCodeImgServlet?` + new Date().getTime();
}

function showErrorMessage() {
    const errorMessage = document.getElementById('error-message');
    if (errorMessage.innerHTML.trim() !== '') {
        errorMessage.style.display = 'block';

        // 3秒后自动隐藏错误消息
        setTimeout(() => {
            errorMessage.style.display = 'none';
        }, 3000);
    }
}
